<template>
	<view>
		<view style="width: 95%;margin: 0 auto;" @click='toShop(shop_info.id)'>
			<view class="shop-card">
				<view class="card-img">
					<image :src="shop_info.imgUrl"></image>
				</view>
				<view class="card-info">
					<view class="shop-name">{{shop_info.shopName}}</view>
					<view class="shop-info1">
						<view class="info1-1">
							<view class="shop-score">
								{{shop_info.score}}分
							</view>
							<view>
								月销200+
							</view>
						</view>
						<view class="info1-2">
							<view>
								34分钟
							</view>
							<view>
								3.5km
							</view>
						</view>

					</view>
					<view class="shop-info2">
						<view class="info2-1">
							起送¥15
						</view>
						<view class="info2-2">
							配送¥2
						</view>
					</view>
					<view class="shop-desc">描述</view>
					<view>优惠信息</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "shop-card",
		props:{
			shop_info:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			toShop(id){
				uni.navigateTo({
					url: `/pages/shop/shop?id=${id}`
				});
			}
		}
	}
</script>

<style>
	.shop-card {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: flex-start;
		align-content: center;

	}

	,
	.card-img {
		width: 200upx;
		height: 200upx;
		border: 1upx solid gray;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
	}

	.card-img image {
		width: 90%;
		height: 90%;
		border-radius: 30upx;
		;
	}

	.card-info {
		flex: 1;
		margin-left: 15upx;
	}

	.shop-name {
		font-size: large;
		font-weight: bold;
	}

	.shop-info1,
	.shop-info2,
	.info1-1,
	.info1-2 {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		font-size: small;
		color: dimgray;
	}

	.shop-info1,
	.shop-info2 {
		margin-top: 5upx;
	}

	.shop-score {
		color: red;
		font-weight: bold;
	}

	.info1-1 view,
	.info1-2 view {
		margin-right: 10upx;
	}

	.info1-2 {
		margin-left: 20upx;
	}

	.shop-info2 {
		justify-content: flex-start;
	}

	.info2-1,
	.info2-2 {
		margin-right: 20upx;
	}
</style>